<template>
  <view class="main">
    <view class="login-btn-wrapper">
      <button class="login-btn" @tap="weixinLogin">
        登录/注册
      </button>
    </view>
    <view>
      <!-- #ifdef H5 -->
      <cl-dialog title="扫码登录" :visible.sync="showWxQR">
        <text>扫码登录暂未启用</text>
      </cl-dialog>
      <!-- #endif -->
      <cl-dialog class="bind-mobile-ask-dlg" :visible="askBindMobile" title="绑定手机号">
        <text>未设置手机号，请绑定手机号</text>
        <button type="primary" open-type="getPhoneNumber" class="bind-mobile-ask-btn" round @getphonenumber="handleWxMobileLogin">绑定手机号</button>
      </cl-dialog>
    </view>
    <view class="protocol"> 注册登录代表阅读并同意<span @tap="goProtocol">用户服务协议</span></view>
  </view>
</template>

<script>
import login from '@/api/account'

export default {
  name: 'WxLogin',
  data() {
    return {
      redirect: null,
      showWxQR: false,
      askBindMobile: false
    }
  },

  onLoad(options) {
    let redirect = options.redirect
    if (redirect) {
      redirect = decodeURIComponent(redirect)
      this.redirect = redirect
    }
  },
  onShow() {
    this.checkLogined()
  },
  methods: {
    weixinLogin() {
      // #ifdef MP-WEIXIN
      uni.getUserProfile({
        desc: '登录用户后台',
        success: res => {
          this.userInfo = res
          this.handleWxLogin()
        },
        fail: res => {
          uni.showToast({ icon: 'none', title: '您拒绝了授权' })
        }
      })
      // #endif
      // #ifdef H5
      this.showWxQR = true
      // #endif
    },

    handleWxLogin() {
      login
        .wxLogin({
          openid: uni.getStorageSync('openid'),
          iv: this.userInfo.iv,
          rawData: this.userInfo.rawData,
          signature: this.userInfo.signature,
          encryptedData: this.userInfo.encryptedData
        })
        .then(res => {
          // 如果没有返回token，就触发绑定手机号码
          if (res.missingMobile) {
            this.askBindMobile = true
            return
          }
          this.loginSuccess(res.token)
        })
        .catch(e => {
          uni.showModal({ title: '请重试' })
        })
    },
    handleWxMobileLogin(e) {
      const data = e.detail

      login
        .wxMobileLogin({
          openid: uni.getStorageSync('openid'),
          iv: data.iv,
          encryptedData: data.encryptedData,
          userInfo: {
            rawData: this.userInfo.rawData,
            signature: this.userInfo.signature,
            encryptedData: this.userInfo.encryptedData,
            iv: this.userInfo.iv
          }
        })
        .then(res => {
          this.loginSuccess(res.token)
        })
    },
    loginSuccess(token) {
      uni.setStorageSync('access_token', token)
      this.showWxQR = false
      this.askBindMobile = false
      this.checkLogined()
    },
    // 用户协议
    goProtocol() {
      uni.navigateTo({
        url: '/pages/common/web?url=' + getApp().globalData.user_protocol
      })
    },
    checkLogined() {
      if (uni.getStorageSync('access_token')) {
        if (this.redirect) {
          uni.redirectTo({ url: this.redirect })
        } else {
          uni.navigateBack({ delta: 0 })
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
@mainColor: #007cdc;
.gradient {
  background-image: linear-gradient(to right, @mainColor, lighten(@mainColor, 18%));
}
.main {
  padding: 40vh 10%;
  text-align: center;

  .login-btn {
    .gradient;
    border: none;
    outline: none;
    width: 100%;
    position: relative;
    color: white;
    border-radius: 1.2rem;
    overflow: hidden;
    letter-spacing: 0.6rem;
    text-indent: 0.6rem;
    text-align: center;
    outline: 0;
  }

  .protocol {
    position: fixed;
    font-size: 0.72em;
    bottom: 1vh;
    left: 0;
    text-align: center;
    width: 100%;
    color: #333333;
    span {
      color: #2986de;
    }
  }

  .bind-mobile-ask-btn {
    margin-top: 15px;
  }
}
</style>
